<template>
	<div>
		<div>
			<el-card>
				<el-form class="searchForm" size="mini" label-width="100px">
					<el-form-item label="用户名称">
						<el-input
							style="width: 200px"
							v-model="searchData.name"
							placeholder="请输入用户名称"
						></el-input>
					</el-form-item>
					<el-form-item label="登录时间">
						<el-date-picker
							v-model="times"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						>
						</el-date-picker>
					</el-form-item>

					<div class="searchBtn">
						<el-button type="primary" size="small" @click="keywordSearch"
							><i class="el-icon-search"></i> 搜索</el-button
						>
						<el-button type="info" size="small"><i class="el-icon-delete"></i> 清空</el-button>
						<el-button type="success" size="small" @click="refresh"
							><i class="el-icon-refresh"></i> 刷新</el-button
						>
					</div>
				</el-form>
				<div>
					<el-table
						:data="userData"
						height="450"
						border
						style="width: 100%"
						:cell-style="{ 'text-align': 'center' }"
						:header-cell-style="{ 'text-align': 'center' }"
					>
						<el-table-column type="index" label="编号" width="50"></el-table-column>
						<el-table-column prop="username" label="用户名"></el-table-column>
						<el-table-column prop="name" label="用户昵称"></el-table-column>
						<el-table-column prop="phone" label="手机号"></el-table-column>
						<el-table-column prop="createTime" label="登录时间" width="220"></el-table-column>
						<el-table-column label="操作" width="160">
							<template slot-scope="scope">
								<el-link type="danger" class="btn" icon="el-icon-delete" @click="removeUser(scope.row)"
									>强制下线
								</el-link>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						:total="pagingData.total"
						background
						layout="total,sizes, prev, pager, next"
						:page-size="pagingData.size"
						:page-sizes="[1, 5, 10, 20, 30, 50]"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pagingData.current"
					></el-pagination>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import { findAllOnlineUser, findUserPage, forcedReturnById } from "../../../api/admin/permissions/user"
import { Base64 } from "js-base64"
import moment from "moment"

export default {
	name: "online",
	data() {
		return {
			times: "",
			pagingData: {
				current: 1,
				size: 20,
				total: 0,
			},
			searchData: {
				name: "",
				startDate: "",
				endDate: "",
			},
			roleOptions: [],
			userData: [],
			importDialogVisible: false,
			addDialogVisible: false,
			editDialogVisible: false,
			fileUploadUrl: "",
			fileList: [],
			userForm: {
				id: "",
				username: "admin1",
				password: "111111",
				phone: "",
				name: "",
				userFace: "",
				enableFlag: "",
				roleIds: [],
			},
		}
	},
	created() {
		this.init()
	},
	methods: {
		/*
                关键词搜索
            */
		keywordSearch() {
			if (this.times.length > 0) {
				this.searchData.startDate = moment(this.times[0]).format("YYYY-MM-DD mm:ss")
				this.searchData.endDate = moment(this.times[1]).format("YYYY-MM-DD mm:ss")
			}

			let search = {
				...this.searchData,
				// total: this.pagingData.total,
				size: this.pagingData.size,
				current: this.pagingData.current,
			}
			findAllOnlineUser(search).then((res) => {
				this.pagingData.total = res.data.data.total
				this.pagingData.size = res.data.data.size
				this.pagingData.current = res.data.data.current
				this.userData = res.data.data.records
			})
		},
		// 页码切换
		handleSizeChange(val) {
			this.pagingData.size = val
			this.init()
		},
		// 当前页切换
		handleCurrentChange(val) {
			this.pagingData.current = val
			this.init()
		},
		refresh() {
			this.init()
		},
		init() {
			let search = {
				...this.searchData,
				// total: this.pagingData.total,
				size: this.pagingData.size,
				current: this.pagingData.current,
			}
			findAllOnlineUser(search).then((res) => {
				this.pagingData.total = res.data.data.total
				this.pagingData.size = res.data.data.size
				this.pagingData.current = res.data.data.current
				this.userData = res.data.data.records
			})
		},
		removeUser(row) {
			let userInfo = localStorage.getItem("userInfo")
			let info = JSON.parse(Base64.decode(userInfo))
			if (row.username == info.username) {
				this.$message.warning("禁止登出当前用户!")
				return
			}
			forcedReturnById(row.username).then((res) => {
				if (res.data.code == "200") {
					this.$message.success("强制登出用户成功")
					this.init()
					return
				}
				this.$message.error("强制登出用户失败")
				return
			})
		},
	},
}
</script>

<style lang="scss" scoped>
@import "~@/style/publicPage.scss";
</style>
